.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    > .content {
        width: 60%;
        position: relative;
        display: flex;
        align-items: center;

        > .login {
            width: 100%;
            position: absolute;
            transition: all 0s ease;
            opacity: 0;
            transform: translate3d(100%, 0, 0);

            &:global(.in) {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition: all 1s ease;
            }

            &:global(.out) {
                opacity: 0;
                transform: translate3d(0, 155%, 0);
                transition: all 1s ease;
            }
        }

        > .join {
            width: 100%;
            position: absolute;
            transition: all 0s ease;
            opacity: 0;
            transform: translate3d(100%, 0, 0);

            &:global(.in) {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition: all 1s ease;
            }

            &:global(.out) {
                opacity: 0;
                transform: translate3d(0, 128%, 0);
                transition: all 1s ease;
            }
        }

        > .forget {
            width: 100%;
            position: absolute;
            transition: all 0s ease;
            opacity: 0;
            transform: translate3d(100%, 0, 0);

            &:global(.in) {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition: all 1s ease;
            }

            &:global(.out) {
                opacity: 0;
                transform: translate3d(0, 180%, 0);
                transition: all 1s ease;
            }
        }
    }
}
